<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue';
onMounted(() => {
});
let contactPerson = ref("")
let eMail = ref("")
let contactData = ref([
  { otherContactMethod: '', info: "" },
])
const addContactRow = () => {
  contactData.value.push(
    { otherContactMethod: '', info: "" },
  )
}
const deletContactRow = (index) => {
  contactData.value.splice(index, 1)
}
let publicChecked = ref(1)
let checkedPublic = (item) => {
  publicChecked.value = item
}
let showContactInformation = ref(1)
let checkedShow = (item) => {
  showContactInformation.value = item
}
</script>
<template>
  <div class="inquiry-wrap">
    <el-form class="look-agent" ref="AgentFormRef">
      <div class="input-wrap">
        <!-- Contact Person -->
        <el-row :gutter="20" class="from-to">
          <el-col :span="12">
            <el-form-item label="Contact Person" prop="contactPerson">
              <el-input v-model="contactPerson" placeholder="Please input contact person" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="E-mail" prop="eMail">
              <el-input v-model="eMail" placeholder="Please input e-mail" />
            </el-form-item>
          </el-col>
        </el-row>
        <!-- Other contact information -->
        <div class="flex align-center row-pub agent-data" v-for="(item, index) in contactData" :key="index">
          <span class="del" @click="deletContactRow(index)" v-if="contactData.length !== 1 && index <= 4">×</span>
          <el-row :gutter="20" class="information-row pub">
            <el-col :span="12">
              <el-form-item label="Other contact information" prop="interst">
                <el-select v-model="item.otherContactMethod" placeholder="Please select other contact method">
                  <el-option label="QQ" value="QQ" />
                  <el-option label="WeChat" value="WeChat" />
                  <el-option label="Telephone" value="Telephone" />
                  <el-option label="E-mail" value="E-mail" />
                  <el-option label="WhatsApp" value="WhatsApp" />
                  <el-option label="Skype" value="Skype" />
                  <el-option label="LinkedIn" value="LinkedIn" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label=" " prop="interst">
                <el-input v-model="item.info" placeholder="Please enter a valid information" />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="handle-wrap flex align-center justify-center">
            <span class="add" @click="addContactRow"
              v-if="index === contactData.length - 1 && contactData.length < 5">+</span>
          </div>
        </div>
        <!-- Public Show Contact Information -->
        <el-row :gutter="20" class="information-type">
          <el-col :span="12">
            <el-form-item label="Public" prop="publicChecked">
              <el-radio-group v-model="publicChecked">
                <el-radio :value="1" size="large" border @click="checkedPublic(1)">Yes</el-radio>
                <el-radio :value="0" size="large" border @click="checkedPublic(0)">No</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Show Contact Information" prop="showContactInformation">
              <el-radio-group v-model="showContactInformation">
                <el-radio :value="1" size="large" border @click="checkedShow(1)">Yes</el-radio>
                <el-radio :value="0" size="large" border @click="checkedShow(0)">No</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.inquiry-wrap {
  .input-wrap {
    .pub {
      width: calc(100% - 64px);
      background: #F5F5F5;
      margin: 0px !important;
    }

    .information-row {
      height: 134px;
      padding: 24px 0px 0px 20px;
    }

    .agent-data {
      margin: 40px 0px 0px 0px;
      .handle-wrap {
        width: 62px;
        height: 134px;
        background: #E9E9E9;
      }
    }

    .container-data,
    .quantity-data {
      .handle-wrap {
        width: 62px;
        height: 226px;
        background: #E9E9E9;
      }
    }

    .container-row {
      height: 226px;
      padding: 24px 20px 0px 20px
    }

    .del,
    .add {
      width: 35px;
      height: 35px;
      border: 1px solid #333;
      border-radius: 50%;
      display: flex;
      font-size: 26px;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  :deep(.el-form) {
    .el-row {
      margin: 25px 0px 0px 0px;

      .el-col {
        border-radius: 0px;

        .el-form-item {
          width: 100%;
          display: flex;
          flex-direction: column;
          margin-bottom: 0px;

          .el-form-item__label {
            font-weight: bold;
            font-size: 16px;
            display: block;
            margin: 0px 0px 16px 0px;
            line-height: 17px;
            height: 17px;
            white-space: nowrap !important;
          }

          .el-select__wrapper,
          .el-input__wrapper {
            height: 50px;
          }

          .need-select {
            width: 196px;
            margin: 0px 10px 0px 0px;
          }
        }
      }
    }

    .information-type {
      margin: 40px 0px 0px 0px;
      .el-radio-group {
        align-items: center;
        display: inline-flex;
        flex-wrap: wrap;
        font-size: 0;

        .el-radio {
          width: 185px !important;
          height: 50px;
          border-radius: 4px;
          color: #333 !important;
          display: flex;
          flex-direction: row-reverse;
          justify-content: space-between;
          margin: 0px 15px 15px 0px;

          &.is-checked {
            border-color: #5B108E !important;

            .el-radio__label {
              color: #5B108E;
            }

            .el-radio__inner {
              background: transparent;
              background-image: url("@/assets/images/checked.png");
              background-size: 14px 14px;
              border: none;

              &::after {
                display: none; //隐藏小圆点
              }
            }
          }
        }
      }
    }
  }
}

.flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.row-pub {
  margin: 0px 0px 10px 0px;
  position: relative;

  .del {
    width: 35px;
    height: 35px;
    display: flex;
    font-size: 26px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 68px;
    z-index: 1;
    border: none !important;
  }
}

.mt16 {
  margin-top: 16px;
}
</style>
